<template>
	<el-dialog :title="`${row.groupName}分组总代账号`" :visible.sync="visible">
		<el-table
			v-loading="loading"
			ref="elTable"
			element-loading-spinner="el-icon-loading"
			border
			size="mini"
			class="small-size-table"
			:max-height="tableHeight"
			:data="tableData"
			v-bind="$attrs"
			v-on="$listeners"
			:header-cell-style="getRowClass"
			highlight-current-row
		>
			<el-table-column
				v-for="(item, index) in columns"
				:key="'column_' + index"
				:prop="columns[index].prop"
				:align="item.alignCenter"
				:label="item.label"
				:min-width="item.minWidth"
				:fixed="item.isFixed"
				:sortable="item.isSortColumn"
				:show-overflow-tooltip="item.isShowTip"
			>
				<template slot="header">
					<span>
						{{ item.label }}
					</span>
				</template>
				<template slot-scope="{ row, $index }">
					<div v-if="item.solt === 'defaultSolt'">
						<span>
							{{ row[item.prop] || '-' }}
						</span>
					</div>

                    <div v-if="item.solt === 'accountTypeSolt'">
                        {{ typeFilter(row.accountType, 'accountType') }}
                    </div>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination
			v-show="!!total"
			class="dialog-pages"
			:current-page.sync="pageNum"
			background
			layout="total, sizes,prev, pager, next, jumper"
			:page-size.sync="pageSize"
			:page-sizes="pageSizes"
			:total="total"
			:pager-count="9"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>
    </el-dialog>
</template>

<script>
import list from '@/mixins/list'
export default {
  mixins: [list],
  props: {
	row: {
      type: Object,
      default: () => ({})
    },
    value: {
      type: Boolean,
      default: false
    },

  },
  data() {
    return {
      visible: false,
	  columns: [
        {
            label: '总代账号',
            prop: 'userName',
            solt: 'defaultSolt'
        },
        {
            label: '账号类型',
            prop: 'accountType',
            solt: 'accountTypeSolt'
        }
      ],
      loading: false,
      tableHeight: 480,
      tableData: [
      ],
      subSummary: {},
    }
  },
  watch: {
    value: {
      handler(val) {
        this.visible = val
      },
      immediate: true
    },
    visible(newVal) {
      this.$emit('input', newVal)
    }
  },

  methods: {
	loadData() {
      this.loading = true
	  const params = {
        groupId: this.row.id,
        groupName: this.row.groupName
	  }
	  this.$api
		.proxyGroupPageProxyByGroupId(this.getParams(params))
		.then((res) => {
            this.loading = false
			if (res?.code === 200) {
				const { record, totalRecord, summary } = res.data || {}
                this.tableData = res?.data?.record || []
                this.total = res?.data?.totalRecord || 0
            }
		})
		.catch(() => {
			this.loading = false
		})

    }
  }
}
</script>

<style lang="scss" scoped>

.dialog-pages{
	margin: 0 auto;
	text-align: center;
	margin-top: 15px;
}
</style>